<header class="sticky top-0 z-50 bg-white shadow" wire:ignore>
    <div class="flex items-center justify-between py-2">
        <a class="p-2 flex-none cursor-pointer" aria-label="后退"
           @if($url->isNotEmpty()) href="{{ $url }}" @else x-on:click="history.back()" @endif
        >
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path fill-rule="evenodd" d="M7.72 12.53a.75.75 0 010-1.06l7.5-7.5a.75.75 0 111.06 1.06L9.31 12l6.97 6.97a.75.75 0 11-1.06 1.06l-7.5-7.5z" clip-rule="evenodd"/>
            </svg>
        </a>

        <h1 class="font-bold text-xl text-center truncate">{{ $title }}</h1>

        <div class="p-2 cursor-pointer flex-none opacity-0" onclick="history.forward()" aria-label="前进">
            <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                <path fill-rule="evenodd" d="M16.28 11.47a.75.75 0 010 1.06l-7.5 7.5a.75.75 0 01-1.06-1.06L14.69 12 7.72 5.03a.75.75 0 011.06-1.06l7.5 7.5z" clip-rule="evenodd"/>
            </svg>
        </div>
    </div>

    {{ $slot }}
</header>
